<template>
  <div class="w-full h-full">
    <div v-if="stageIndex === 0" class="type-intro text-333">
      <span class="type"
        >听后选择（共{{ questionCount * 2 }}小题；每小题1.5分，共{{
          questionCount * 2 * 1.5
        }}分）</span
      >
      <p class="mt-10px">
        <span class="intro"
          >听对话或独白，根据所听内容从每题所给的A、B、C三个选项中选择最佳选项，并用鼠标点击该选项。听每段对话或独白前，你有5秒钟的时间阅读每小题。听完后，你有5秒钟的时间作答。每段对话或独白你将听两遍。</span
        >
      </p>
    </div>
    <Stem
      v-else
      master="homework_todo_question_english"
      :data="stem"
      :answer="answer"
      :student-answer="studentAnswer"
      :readonly="readonly"
      @change-student-answer="changeStudentAnswer"
    />
  </div>
</template>

<script>
import Stem from '@/components/question/stem/index'
import { mapState } from 'vuex'
import { formatQuestionStem } from '@/utils/question'

export default {
  components: { Stem },
  inject: ['globalData'],
  props: {},
  data() {
    return {}
  },
  computed: {
    stageIndex() {
      const { stageIndex } = this.globalData.controller

      return stageIndex
    },
    currentStage() {
      return this.globalData.controller.getCurrentStage()
    },
    readonly() {
      const { isQuestionReadonly } = this.currentStage

      return isQuestionReadonly
    },
    ...mapState(['homework']),
    currentHomework() {
      return this.homework.currentHomework
    },
    currentQuestion() {
      const { questions, questionIndex } = this.currentHomework
      return questions[questionIndex]
    },
    questionCount() {
      const {
        stem: {
          info: { question: questions }
        }
      } = this.currentQuestion

      return questions.length
    },
    stem() {
      const { questionStem: stem } = this.currentStage

      return stem ? stem : ''
    },
    answer() {
      const { answer } = this.currentQuestion
      const { questionIndex } = this.currentStage

      try {
        return {
          anSqs: answer.anSqs[questionIndex]
        }
      } catch (error) {
        return {}
      }
    },
    studentAnswer() {
      const {
        localStudentAnswer: { studentAnswer }
      } = this.currentQuestion
      const { questionIndex } = this.currentStage

      try {
        return studentAnswer.anSqs[questionIndex]
          ? {
              anSqs: studentAnswer.anSqs[questionIndex]
            }
          : ''
      } catch (error) {
        return ''
      }
    }
  },
  created() {
    this.$on('pause', () => {})
    this.$on('resume', () => {})
  },
  mounted() {},
  methods: {
    init(stageIndex) {
      const {
        stem: {
          info: { question: questions }
        }
      } = this.currentQuestion

      if (!Array.isArray(questions)) return

      let stages = [
        {
          name: '题型说明',
          operateTips: '听对话或独白，根据所听内容从每题所给的A、B、C三个选项中选择最佳选项。',
          duration:
            'https://snd-ai-assistant.oss-cn-shenzhen.aliyuncs.com/question/static/english/audio/bj_1_desc.mp3'
        }
      ]

      questions.forEach((q, q_index) => {
        const startIndex = q_index + (q_index + 1)
        const { stem: _stem } = q
        const {
          info: { audio, xtlist = [] }
        } = JSON.parse(_stem)

        let sqs = []
        xtlist.forEach((i, index) => {
          const { xt_nr = '', xxlist = [] } = i

          sqs.push({
            html: `<div class="mt-${index === 0 ? 10 : 18}px">${xt_nr.replace(
              /ets_th[0-9]\s/,
              `${startIndex + index}.`
            )}</div>`,
            og: {
              ogOps: xxlist.map((item) => {
                const { xx_mc, xx_nr } = item

                return {
                  index: xx_mc,
                  html: `${xx_mc}.${xx_nr}`
                }
              }),
              cols: xxlist.length
            },
            sqs: [],
            type: '选择题'
          })
        })

        const stem = formatQuestionStem({
          html: `<div><span style="font-size:0.26rem;font-weight:500">听后选择（共${
            questions.length * 2
          }小题；每小题1.5分，共${
            questions.length * 2 * 1.5
          }分）</span><p><span>听下面一段对话，回答第${startIndex}至第${
            startIndex + 1
          }小题。现在，你有10秒钟的时间阅读这两道小题。</span></p></div>`,
          og: null,
          sqs,
          type: '英语听说-听后选择'
        })

        stages = stages.concat([
          {
            name: '播放题干',
            questionIndex: q_index,
            questionStem: stem,
            operateTips: '放音',
            duration: `https://snd-ai-assistant.oss-cn-shenzhen.aliyuncs.com/question/static/english/audio/bj_1_${
              q_index + 1
            }.mp3`
          },
          {
            name: '空10秒',
            questionIndex: q_index,
            questionStem: stem,
            operateTips: '请阅读相关小题',
            duration: 10 * 1000,
            ignoreSpeed: true
          },
          {
            name: '播放对话第一遍',
            questionIndex: q_index,
            questionStem: stem,
            operateTips: '第一遍',
            duration: audio
          },
          {
            name: '播放对话第二遍',
            questionIndex: q_index,
            questionStem: stem,
            operateTips: '第二遍',
            duration: audio
          },
          {
            name: '空10秒',
            questionIndex: q_index,
            questionStem: stem,
            operateTips: '请选择',
            duration: 10 * 1000,
            ignoreSpeed: true
          }
        ])
        return q
      })

      this.globalData.controller.reset()
      this.globalData.controller.init(stages, stageIndex)
    },
    changeStudentAnswer({ answer = {}, status = 0, canNext = false }) {
      const { localStudentAnswer } = this.currentQuestion
      const { questionIndex } = this.currentStage
      if (typeof localStudentAnswer.studentAnswer === 'object') {
        const studentAnswerItem = localStudentAnswer.studentAnswer.anSqs[questionIndex]
        const [answer0, answer1] = answer.anSqs

        if (answer0) studentAnswerItem[0] = answer0
        if (answer1) studentAnswerItem[1] = answer1
        this.$set(localStudentAnswer.studentAnswer.anSqs, questionIndex, studentAnswerItem)
      }
      this.currentQuestion.localStudentAnswerStatus = status
      // canNext && console.log(this.homework)
    }
  }
}
</script>

<style lang="scss" scoped></style>
